<template>
  <div
    class="com-mobile-cell-00"
    @click="cellClick()">
    <p class="title">
      {{ title }}
    </p>
    <p
      class="content"
      v-if="content">
      {{ content }}
    </p>
    <p
      class="footer"
      v-if="footer">
      {{ footer }}
    </p>
  </div>
</template>

<script>
  export default {
    name: "ComMobileCell00",
    props: {
      title: {
        type: String,
        default: ''
      },
      content: {
        type: String,
        default: ''
      },
      footer: {
        type: String,
        default: ''
      }
    },
    methods: {
      cellClick() {
        this.$emit('click')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .com-mobile-cell-00 {
    list-style: none;
    margin: 5px 0;
    padding: 5px 10px;
    background-color: #efefef;

    > .title {
      font-size: 18px;
      color: #666;
      margin: 0;
    }

    > .content {
      padding-top: 5px;
      margin: 0;
      font-size: 14px;
      color: #999999;
      line-height: 20px;
    }

    > .footer {
      padding-top: 5px;
      font-size: 14px;
      color: #bbb;
      margin: 0;
    }
  }
</style>
